<template>
  <base-page>
    <el-button :plain="true" @click="openVn">VNode</el-button>
    <el-container>
      <el-header>
        <div class="searchbar">
          <el-input
            :placeholder="placeholder"
            v-model="searchContent"
            class="search-input"
          ></el-input>
          <base-button
            style="margin-left: 15px"
            @click="search"
            class="search-button"
            >搜索</base-button
          ><span class="result-count">搜索结果：{{ searchResultCount }}</span>
        </div>
      </el-header>
      <el-main>
        <blog-card></blog-card>
      </el-main>
    </el-container>
  </base-page>
</template>

<script>
import { ref, computed, watch } from "vue";
import { useRoute } from "vue-router";
export default {
  setup() {
    const route = useRoute();
    const searchResultCount = ref(""); //搜索结果数

    function getSearchResultCount() {
      //获取搜索结果数
      searchResultCount.value = 0;
    }

    watch(
      //监听搜索结果数,如果为0则弹出提示
      () => searchResultCount,
      (newValue) => {
        if (newValue === 0) {
          // Call your function here
          console.log("暂时无你所要找的内容");
        }
      }
    );

    //默认搜索结果
    const placeholder = computed(() => {
      const pathParts = route.path.split("/");
      return pathParts[pathParts.length - 1];
    });
    return {
      searchResultCount,
      getSearchResultCount,
      placeholder,
    };
  },
};
</script>

<style scoped>
.searchbar {
  display: flex;
  align-items: center;
  height: 100%;
  width: 80%;
  margin-left: 10px;
  padding: 0;
}
.result-count {
  font-size: 18px;
  margin-left: 30px;
  white-space: nowrap;
}
.el-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  position: relative;
  margin: 2%;
  height: 100%;
  padding: 0;
}
.el-header {
  height: 5%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid forestgreen;
}
</style>
